<template>
  <div class="flex-column h100p">
    <gnb-top-bar/>
    <div class="select-tree-file h100p"
         @mouseup="onMouseUp"
         @mousemove="onMouseMove"
    >
      <div class="move-container"
           :style="cursorPosition"
           v-if="showDragContainer"
      ></div>
      <splitpanes v-if="$store.state.note.selectedNote"
      >
        <pane min-size="10"
              size="15"
              class="box-shadow-thick"
              id="treeContainer"
              @click="onClickTreeContainer"
        >
          <div class="pa-sm">
            <el-button
                type="primary"
                style="width: 100%;"
                icon="el-icon-plus"
                plain
                @click.stop="onClickAddDirectory"
            >添加文件夹
            </el-button>
          </div>
          <gnb-tree
              :data="$store.state.note.noteDirectories"
          />
        </pane>
        <pane min-size="10" size="19">
          <gnb-list/>
        </pane>
        <pane min-size="10" size="65%">
          <gnb-markdown/>
        </pane>
      </splitpanes>
    </div>
  </div>
</template>

<script lang="ts">
import SelectTreeFile from "@/pages/select-tree-file.vue";
import {useStore} from "vuex";
import {debounce} from "@/utils/throttle-debounce.utils";
import {ref, toRaw} from "vue";
import GnbTree from "@/components/gnb-tree.vue";
import GnbList from "@/components/gnb-list.vue";
import GnbTopBar from "@/components/gnb-top-bar.vue";
import {DirTree} from "@/utils/main/file.uitls";
import GnbMarkdown from "@/components/gnb-markdown.vue";
import {IpcRenderer} from "@/utils/render/common";
import {CommonListener} from "@/utils/listener.utils";

export default {
  name: 'home',
  mixins: [],
  components: {GnbMarkdown, GnbTopBar, GnbList, GnbTree, SelectTreeFile},
  props: {},
  data() {
    return {}
  },
  setup: function () {
    const store = useStore();

    const onMouseUp = async (e) => {
      const {source, target} = store.state.drag;
      if (source && target) {
        await IpcRenderer.invoke("moveItem", toRaw(source), toRaw(target));
        CommonListener.trigger("onMoveItem");
        await store.dispatch("syncNoteDirectories");
      }
      if (source && !target && e.target.id === 'treeContainer') {
        await IpcRenderer.invoke("moveItem", toRaw(source), toRaw(store.state.note.selectedNote));
        CommonListener.trigger("onMoveItem");
        await store.dispatch("syncNoteDirectories");
      }
      await store.dispatch("clearTargetSource");
      showDragContainer.value = false;
    };

    const onMouseMove = (e) => {
      const {source} = store.state.drag;
      if (!source) return;
      showDragContainer.value = true;
      cursorPosition.value = {
        left: e.clientX + 15 + 'px',
        top: e.clientY + 15 + 'px',
      }
    };

    const showDragContainer = ref(false);

    // 鼠标当前位置
    const cursorPosition = ref({left: 0 + 'px', top: 0 + 'px'});

    // 点击添加文件夹按钮
    const onClickAddDirectory = () => {
      const {noteDirectories, selectedFolder, selectedNote} = store.state.note;
      noteDirectories.push(new DirTree("", selectedNote.path, [], false));
    }

    const onClickTreeContainer = (e) => {
      if (e.target.id === 'treeContainer') {
        store.dispatch("setSelectedFolder", store.state.note.selectedNote);
      }
    }

    return {
      cursorPosition,
      showDragContainer,

      onMouseUp,
      onMouseMove,
      onClickAddDirectory,
      onClickTreeContainer,
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  beforeUnmount() {
  },
  activated() {
  },
  deactivated() {
  },
  methods: {}
};
</script>

<style scoped lang="less">
.home {

}

.move-container {
  position: fixed;
  border: 4px dashed fade(#000, 30%);
  height: 20px;
  width: 40px;
  z-index: 100;
}
</style>